import React, { Component } from 'react';
import { NavigationEvents } from 'react-navigation';
import { StyleSheet, View, AppState, ScrollView, Image, Platform, Text } from "react-native";
import { GLOBAL } from '../../config/global';
import { toneTheme } from '../../theme/style';
import JPushUtil from '../../utils/JPush';
import { Future } from './_components/Future';
import { HomeBody } from './_components/HomeBody';
import { PageStatusIndex } from '../../component/page-status/PageStatusIndex';
import { HeadInfo } from './_components/HeadInfo';
import { FingerPrintDialog } from '../../components/common/fingerprintDialog';
const touchIDImg = require('../../imgs/img-touchid.png');

const scale = GLOBAL.SCALE;
export class HomePage extends Component {
	static navigationOptions = {
		headerTitle: null,
		headerStyle: {
			height: 0,
			elevation: 0,
			backgroundColor: '#167AEB',
			borderBottomWidth: 0
		},
	}

	constructor(props) {
		super(props);
		let isFingerprintStatus = GLOBAL.isFingerprintStatus ? GLOBAL.isFingerprintStatus : false;
		// if (!isFingerprintStatus && GLOBAL.SUPPORT_BIOMETRY_TYPE && !GLOBAL.BIND_BIOMETRY_AUTH) {
		// 	authBindModalVisible = GLOBAL.SUPPORT_BIOMETRY_TYPE && !GLOBAL.BIND_BIOMETRY_AUTH;
		// 	this.setState({
		// 		authBindModalVisible: GLOBAL.SUPPORT_BIOMETRY_TYPE && !GLOBAL.BIND_BIOMETRY_AUTH
		// 	})
		// }
		this.state = {
			status: 'data',
			navBaropacity: 0,
			authBindModalVisible: !isFingerprintStatus && GLOBAL.SUPPORT_BIOMETRY_TYPE && !GLOBAL.BIND_BIOMETRY_AUTH && !GLOBAL.IS_EMULATOR,
			isFingerprintStatus: isFingerprintStatus,
		};
	}
	async componentWillMount() {

	}

	componentWillUnmount() {
		AppState.removeEventListener('change', this._handleAppStateChange);
	}
	//检测app 切换前后台状态
	_handleAppStateChange = (nextAppState) => {
		if (nextAppState == 'active') {
			JPushUtil.clearBadge();
		}
	}

	_renderToastWrap = () => {
		return (
			<View>
				<View style={styles.textRow}>
					<Image style={[styles.tipText, { tintColor: 'red' }]} source={touchIDImg} />
				</View>
				<View style={styles.itemText}>
					<Text style={styles.textRowText}>指纹/人脸登入，更安全快捷</Text>
					<Text style={styles.itemTextNum}>开通后可随时在设置中心关闭</Text>
				</View>
			</View>
		)
	}

	render() {
		let { status, authBindModalVisible } = this.state || {};
		return (
			<View style={styles.container}>
				<NavigationEvents
					onWillFocus={({ action }) => {
						if (GLOBAL.ORDER_KEY === 'HomeStack') {
							this.setState({ ls: true })
						}
					}}
					onWillBlur={async ({ action }) => {
						GLOBAL.isFingerprintStatus = true
						//this.setState({ authBindModalVisible: false });
					}}
				/>
				<HeadInfo navBaropacity={this.state.navBaropacity}
					_onScroll={(func) => {
						this._onScroll = func;
					}}
				/>
				{
					status == 'data' ? (
						<ScrollView style={{ flex: 1, position: 'relative' }}
							onScroll={(e) => {
								this._onScroll(e);
							}}
							scrollEventThrottle={8}
						>
							<View style={{ height: 110 * scale }}></View>
							<Image
								source={require('../../imgs/home/bg-new.png')}
								style={{
									width: '100%',
									height: 280 * scale,
									position: 'absolute',
									resizeMode: 'stretch'
								}} />
							<Future />
							<HomeBody />
							{Platform.OS === 'android' ? <View style={{ height: 45 * scale, flex: 1 }}></View> : null}
						</ScrollView>
					) : <View style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' }}>
							<PageStatusIndex status={'loading'} />
						</View>
				}
				<FingerPrintDialog modalVisible={authBindModalVisible} title={'开通指纹/人脸验证'} confirmBtnText={'现在开通'} cancelText={'暂不开通'}
					renderCustom={this._renderToastWrap} onClosePress={() => {
						this.setState({ authBindModalVisible: false, });
						GLOBAL.isFingerprintStatus = true

					}}
					onConfirmPress={() => {
						this.setState({ authBindModalVisible: false, }, () => {
							this.props.navigation.navigate('SetUpPage');
						});
						GLOBAL.isFingerprintStatus = true
					}} />
			</View>
		);
	}
}
const styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: toneTheme.defualt.bg,
	},
	textRow: {
		flexDirection: 'row',
		justifyContent: 'center',
		paddingTop: 20 * scale,
	},
	itemText: {
		paddingTop: 20 * scale,
		paddingLeft: 40 * scale,
		paddingBottom: 20 * scale,
	},
	tipText: {
		width: 60 * scale,
		height: 60 * scale,
	},
	textRowText: {
		fontSize: 16 * scale,
	},
	itemTextNum: {
		fontSize: 16 * scale,
		paddingTop: 5 * scale,
	},
	itemAgree: {
		flexDirection: 'row',
		paddingLeft: 40 * scale,
	},
	itemCont: {
		fontSize: 16 * scale,
	},
	itemAgreeMent: {
		color: '#0091FF',
		fontSize: 16 * scale,
	},
});